<template>
  <div class="user page">
    <cube-scroll>
      <div class="con">
<!--        <div class="search" @click="showAlert">-->
<!--          <span class="iconfont iconxingtaiduICON_sousuo&#45;&#45;"></span>-->
<!--          <span class="name">搜索</span>-->
<!--        </div>-->
<!--        <div class="vip">-->
<!--          <user-item @click.native="turn(user.id)" v-for="(user) in searchUsers" :key="user.id+'s'"-->
<!--                     :user="user"></user-item>-->
<!--        </div>-->

        <div class="users">
          <div class="items" v-for="(key,index) in Object.keys(userList)" :key="index">
            <div v-if="userList[key].length>0">
              <span class="label">{{key}}</span>
              <user-item @click.native="turn(user.id)" v-for="(user,index) in userList[key]" :key="index"
                         :user="user"></user-item>
            </div>
          </div>
        </div>
      </div>
    </cube-scroll>
    <div class="letters">
      <span class="letter" :key="index" v-for="(letter,index) in Object.keys(userList)">{{letter}}</span>
    </div>
  </div>
</template>

<script>
import userItem from '@/components/user-item'
import { sTop } from '../../api/user'
import * as Dialog from '@/dialog'
export default {
  created () {
    // 获取卡片ID
    sTop().then(res => {
      console.log(res.data)
      this.users = res.data
    })
  },
  data () {
    return {
      code: '',
      users: []
    }
  },
  methods: {
    showSuccess () {
      Dialog.showCorrect('赠送成功').then(() => {
        this.$router.push({
          path: '/card'
        })
      })
    },
    turn (uid) {
      this.$router.push({
        path: '/user/info',
        query: { uid }
      })
    },
    showAlert () {
      this.dialog = this.$createDialog({
        type: 'prompt',
        title: '用户编号/手机号/名字',
        prompt: {
          value: '',
          placeholder: '请输入'
        },
        onConfirm: (e, promptValue) => {
          // this.$createToast({
          //     type: 'warn',
          //     time: 1000,
          //     txt: `Prompt value: ${promptValue || ''}`
          // }).show()
        }
      }).show()
    }
  },
  computed: {
    userList () {
      const letter = {
        A: [],
        B: [],
        C: [],
        D: [],
        E: [],
        F: [],
        G: [],
        H: [],
        I: [],
        J: [],
        K: [],
        L: [],
        M: [],
        N: [],
        O: [],
        P: [],
        Q: [],
        R: [],
        S: [],
        T: [],
        U: [],
        V: [],
        W: [],
        X: [],
        Y: [],
        Z: [],
        '#': []
      }
      const pinyin = require('pinyin')
      const reg = /^[A-Za-z]+$/
      this.users.forEach(user => {
        if (user.name !== '' && user.name) {
          const p = pinyin(user.name)[0][0].charAt(0)
          if (reg.test(p)) {
            letter[p.toLocaleUpperCase()].push(user)
          } else {
            letter['#'].push(user)
          }
        } else {
          letter['#'].push(user)
        }
      })

      return letter
      // let pinyin = require("pinyin");
      // let pinData = this.users.map(user=>({
      //     user:user,
      //     pinyin:pinyin(user.name)[0][0]
      // }))
      // return  pinData.sort((a,b)=>{
      //     return a.pinyin.localeCompare(b.pinyin)
      // }).map(p=>p.user)
    }
  },
  name: 'index',
  components: {
    userItem
  }
}
</script>

<style scoped lang="stylus">
  .user
    background-size 100% auto
    z-index 1

    .con
      padding 10px 10px 0
      height 100%
      padding-bottom 44px
      .search
        background-color white
        height 30px
        display flex
        align-items center
        justify-content center
        color: rgba(161, 161, 161, 1);
        margin-bottom 10px
        border-radius 5px

        .iconxingtaiduICON_sousuo--
          font-size 20px

        .name
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 300;

    .users
      .label
        display inline-block
        height 30px
        text-align left
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 300;
        color: rgba(111, 111, 111, 1);
        line-height: 30px;

    .letters
      z-index 2
      display flex
      flex-direction column
      position fixed
      top 50%
      right 10px
      margin-top -50%

      .letter
        margin-top 7px
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 100;
        color: rgba(78, 61, 7, 1);

</style>
